<template>
    <footer class="footer">
        <div class="one">
            <div class="two">
                <h3>关于小猫</h3>
                <p>和小猫的下雨天</p>
            </div>
            <div class="two">
                <h3>还有更多小猫</h3>
                <p>欢迎小猫</p>
            </div>
            <div>
                <h3>带小猫回家</h3>
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">隐私政策</a></li>
                </ul>
            </div>
        </div>
        <div class="three">
            <p>&copy; 闺蜜想不想玩王者荣耀 喵喵喵</p>
        </div>
    </footer>
  

</template>

<script>
    export default {
        name: "FooterSection"
    }
</script>

<style scoped>
.footer {
  background-color: #333;
  color: white;
  padding: 2rem 0 0;
  margin-top: 2rem;
}

.one {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.two {
  flex: 1;
  padding: 0 1rem;
}

.two h3 {
  border-bottom: 1px solid #555;
  padding-bottom: 0.5rem;
}

.two a {
  color: #ddd;
  text-decoration: none;
}

.two a:hover {
  color: white;
}

.two ul {
  list-style: none;
  padding: 0;
}

.three {
  text-align: center;
  padding: 1rem;
  background-color: #222;
  margin-top: 2rem;
}
</style>